<template>
  <div ref="echart" class="echartDiv"></div>
</template>
 
<script setup>
  import * as echarts from 'echarts'
  import 'echarts-gl'
  import { onMounted, toRefs, ref, reactive } from 'vue'

  const echart = ref(null)

  //挂载
  onMounted(() => {
    echartInit()
  })

  const echartInit = () => {
    var myChart = echarts.init(echart.value)
    let option = {
      title: {
        show: false,
        text: '',
        x: 'center'
      },
      tooltip: {},
      xAxis3D: {
        type: 'category',
        data: ['2020', '2021', '2022', '2023', '2024'],
        axisLine:{
          lineStyle:{
            color: 'white',
            width: 2
          }
        },
      },
      yAxis3D: {
        type: 'category',
        data: [''],
        axisLine:{
          lineStyle:{
            width: 1,
            color:'black',
          }
        },
      },
      zAxis3D: {
        type: 'value',
        axisLine:{
          lineStyle:{
            color:'white',
            width:1
          }
        }
      },
      grid3D: {
        show: true,
        boxWidth: 200,
        boxDepth: 10,
        splitLine:{//是否显示坐标轴轴线
          show:false
        },
        axisPointer: {
          show: false
        },
        light: {
          main: {
            intensity: 1
          },
          ambient: {
            intensity: 0.5
          }
        },
        viewControl: {//可以控制整个柱状图场景旋转平移等，自行代数数据试试
          alpha: 0, 
          beta: 0,
          minAlpha: 0,//x轴旋转
          maxAlpha: 0,
          minBeta: 0,//y轴旋转
          maxBeta: 0
        }
      },
      series: [
        {
          type: 'bar3D',
          name:'数据',
          barSize: 10,//柱子大小
          data: [
            [0, 0, 5],
            [1, 0, 4],
            [2, 0, 6],
            [3, 0, 7],
            [4, 0, 3],
          ],
          stack: 'stack',
          shading: 'lambert',
          emphasis: {
            label: {
              show: true
            }
          },
          itemStyle: {
            color: function(params) {
              var colorList = [
                'rgb(106, 240, 177)',
                'rgb(9, 117, 240)',
                'rgb(227, 233, 240)',
                'rgb(247, 183, 56)',
                'rgb(137, 240, 106)',
                'rgb(245, 138, 221)',
                'rgb(224, 85, 85)',
                '#12b7ee',
                '#f035a5'
              ]; //每根柱子的颜色
              
              return colorList[params.dataIndex];
            }
          },
          // 标签
          label: {
            show: true,
            position: "top",
            distance: 10,
            fontSize: 12,
            color: '#fff',
            fontWeight: 500
          }
        }
      ]
    }
                        
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }

</script>
 
<style>
  .echartDiv { width: 100%; height: 100%; }
  .s { color: rgba(247, 74, 5, 0.636); }
</style>
